<template>
  <div class="box1" style=" width: auto;">
    <i @click="Go()" style="display: block; font-size: 15px; margin: 10px; cursor: pointer;">&lt;</i>
    <div class="box2">
      {{ name }}
    </div>
    <img :src='isrc'/>
    <div class="box3" style="margin-top: 10px;margin-left: 10px;">
      <div class="box3_1">{{ name }}
        <div style="font-size: 15px;color: #999999;">订单排名:<span>{{ paiming }}</span></div>
      </div>
      <div class="box3_2">￥{{ money }}元</div>

    </div>
    <br>
    <div class="box4">
      {{ message }}
    </div>

  </div>


</template>

<script>
import {getDataBrand} from '@/api';

export default {
  async mounted() {
    this.id2 = this.$route.query.id;
    await this.change1();
  },
  data() {
    return {
      id2: "",
      name: "",
      money: "",
      message: "",
      isrc: "",
      paiming: ""
    }
  },
  methods: {
    async change1() {
      const result = await getDataBrand(this.id2);
      console.log(result.data.data.brand);
      this.name = result.data.data.brand.name;
      this.money = result.data.data.brand.floor_price;
      this.message = result.data.data.brand.simple_desc;
      this.isrc = result.data.data.brand.list_pic_url;
      this.paiming = result.data.data.brand.new_sort_order;
    },
    Go: function () {
      window.history.go(-1);
    }

  }
}

</script>

<style>

.box2 {
  text-align: center;
  font-size: 15px;

  margin: 10px;
  display: flexbox;
}

img {
  width: 400px;
  height: 220px;
  display: flexbox;
}

.box3 {
  height: 10px;
  display: block;
  margin-bottom: 30px;
}

.box3_1 {
  float: left;
  font-size: 20px;
  font-weight: bolder;
}

.box3_2 {
  float: right;
  font-size: 20px;
  color: red;
}

.box4 {
  text-align: left;
  font-size: 40px;

  color: #999999;
}
</style>